<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3>动态生成单选按钮组、多选按钮组及下拉框组</h3>
		<form>
			<input type="button" value="生成" onclick="generate()" />
			<div id="genderDiv"></div>
			<div id="cityDiv"></div>
			<div id="skillDiv"></div>
		</form>
		<script>
			function generate(){
				var gender = document.getElementById("genderDiv");
				
				var male = document.createElement("input");
				male.type = "radio";
				male.name = "gender";
				male.value = "1";
				male.setAttribute("checked", "checked");
				//male.checked = true;
				gender.appendChild(male);
				gender.innerHTML += "男";
				
				var female = document.createElement("input");
				female.type = "radio";
				female.name = "gender";
				female.value = "0";
				gender.appendChild(female);
				gender.innerHTML += "女";
				
				var city = document.getElementById("cityDiv");
				var bj = document.createElement("input");
				bj.type = "checkbox";
				bj.name = "cities";
				bj.value = "bj";
				city.appendChild(bj);
				city.innerHTML += "北京";
				
				var sh = document.createElement("input");
				sh.type = "checkbox";
				sh.name = "cities";
				sh.value = "sh";
				city.appendChild(sh);
				city.innerHTML += "上海";
				
				var sz = document.createElement("input");
				sz.type = "checkbox";
				sz.name = "cities";
				sz.value = "sz";
				city.appendChild(sz);
				city.innerHTML += "深圳";
				
				var skill = document.getElementById("skillDiv");
				var select = document.createElement("select");
				var option = document.createElement("option");
				option.value = "1";
				option.text = "Java";
				select.options.add(option);
				
				option = document.createElement("option");
				option.value = "2";
				option.text = "C++";
				option.selected = true;
				select.options.add(option);
				
				option = document.createElement("option");
				option.value = "3";
				option.text = "C#";
				select.options.add(option);
				
				skill.appendChild(select);
			}
		</script>
	</body>
</html>
